 <template>
  <div>
    <nav-bar></nav-bar>
    <div>
      <van-divider
        dashed
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >现有栏目</van-divider
      >
      <div class="cate_list">
        <div>
          <p
            v-for="(item, index) in category"
            :key="index"
            @click="remove(index)"
          >
            {{ item.title }}
          </p>
        </div>
      </div>
      <van-divider
        dashed
        :style="{ color: '#ff0000', borderColor: '#1989fa', padding: '0 16px' }"
        >未选择栏目</van-divider
      >
      <div class="cate_list2">
        <div>
          <p
            v-for="(item, index) in delCategory"
            :key="index"
            @click="add(index)"
          >
            {{ item.title }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
 
 <script>
import NavBar from "../components/common/NavBar.vue";
import { selectCategory } from "./../utils/Api";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      category: [],
      delCategory: [],
    };
  },
  created() {
    this.getSelectCategory();
  },
  methods: {
    async getSelectCategory() {
      if (
        JSON.parse(localStorage.getItem("category")) &&
        JSON.parse(localStorage.getItem("delCategory"))
      ) {
        this.category = JSON.parse(localStorage.getItem("category"));
        this.delCategory = JSON.parse(localStorage.getItem("delCategory"));
      } else {
        const res = await selectCategory();
        this.category = res.data;
      }
    },
    remove(index) {
      if (this.category.length == 1) {
        this.$toast.fail("至少留一个");
        return;
      }
      const res = this.category.splice(index, 1);
      this.delCategory.push(res[0]);
      localStorage.setItem("category", JSON.stringify(this.category));
      localStorage.setItem("delCategory", JSON.stringify(this.delCategory));
    },
    add(index) {
      const res = this.delCategory.splice(index, 1);
      this.category.push(res[0]);
      localStorage.setItem("category", JSON.stringify(this.category));
      localStorage.setItem("delCategory", JSON.stringify(this.delCategory));
    },
  },
};
</script>
 
 <style lang="less" scoped>
.cate_list {
  display: flex;
  justify-content: center;
  div {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 86%;
    p {
      margin: 10px;
      width: 26%;
      display: flex;
      justify-content: center;
      border: 0.278vw solid #87ceeb;
      height: 30px;
      align-items: center;
      color: #87ceeb;
    }
  }
}
.cate_list2 {
  display: flex;
  justify-content: center;
  div {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 86%;
    p {
      margin: 10px;
      width: 26%;
      display: flex;
      justify-content: center;
      border: 0.278vw solid #ff4542;
      height: 30px;
      align-items: center;
      color: #ff4542;
    }
  }
}
</style>